<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" class="form-container" :model="page.query" ref="queryForm">
        <div class="search">
          <el-form-item label="品牌名称" prop="name">
            <el-input
                placeholder="请输入品牌名称"
                prefix-icon="el-icon-search"
                v-model="page.query.name"
            >
            </el-input>
          </el-form-item>
          <el-button icon="el-icon-search" type="success" @click="search">搜索</el-button>
          <el-button icon="el-icon-refresh" type="success" class="reset_btn" @click="reset">重置</el-button>
        </div>
        <div class="func">
          <el-button icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
        </div>
      </el-form>

    </el-card>
    <el-table :data="mainMaterials"

              style="width: 100%"
    >

      <el-table-column
          prop="name"
          label="名称"
      >
      </el-table-column>
      <el-table-column
          prop="brand"
          label="品牌"
      >
        <template v-slot="scope">
          <span>{{brandMap.get(scope.row.brand)}}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="specification"
          label="规格"
      >

      </el-table-column>
      <el-table-column
          prop="model"
          label="型号"
      >

      </el-table-column>
      <el-table-column
          prop="costPrice"
          label="成本价"
      >

      </el-table-column>
      <el-table-column
          prop="salePrice"
          label="销售价"
      >

      </el-table-column>
      <el-table-column
          prop="unit"
          label="单位"
      >
        <template v-slot="scope">
          <span>{{unitMap.get(scope.row.unit)}}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="category"
          label="分类"
      >
        <template v-slot="scope">
          <span>{{categoryMap.get(scope.row.category)}}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="quality"
          label="材质"
      >
        <template v-slot="scope">
          <span>{{qualityMap.get(scope.row.quality)}}</span>
        </template>
      </el-table-column>

      <el-table-column
          label="操作"

      >
        <template v-slot="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(scope.row.id)"></el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <page @handlePage="handlePage" :page="page"></page>
    <el-dialog :title="title" :visible.sync="isShow" width="35%">
      <el-form :model="form" ref="mainCostForm" inline size="small" style="margin-left: 50px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="品牌" prop="brand">
          <el-select v-model="form.brand" placeholder="请选择品牌">
            <el-option
                v-for="item in brandOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格" prop="specification">
          <el-input v-model="form.specification" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="型号" prop="model">
          <el-input v-model="form.model" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成本价" prop="costPrice">
          <el-input v-model="form.costPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="销售价" prop="salePrice">
          <el-input v-model="form.salePrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-select v-model="form.unit" placeholder="请选择单位">
            <el-option
                v-for="item in unitOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类" prop="category">
          <el-select v-model="form.category" placeholder="请选择分类">
            <el-option
                v-for="item in categoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="材质" prop="quality" v-show="form.category===2">
          <el-select v-model="form.quality" placeholder="请选择分类">
            <el-option
                v-for="item in qualityOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
              style="width:500px"
              type="textarea"
              :rows="4"
              placeholder="请输入内容备注"
              v-model="form.remark"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Page from '@/components/page/index.vue'
import { deleteMainCost, editMainCost, getMainCost, saveMainCost } from '@/api/maincost'
import { listBrand } from '@/api/brand'
import { listCategory } from '@/api/category'
import { listUnit } from '@/api/unit'

export default {
  name: 'MainCost',
  data() {
    return {
      title: '',
      isShow: false,
      form: {
        name: '',
        brand: '',
        specification: '',
        model: '',
        costPrice: '',
        salePrice: '',
        unit: '',
        category: '',
        quality: '',
        remark: ''
      },
      brandOptions: [],
      brandMap: new Map(),
      unitOptions: [],
      unitMap: new Map(),
      categoryOptions: [],
      categoryMap: new Map(),
      qualityOptions: [],
      qualityMap: new Map(),
      page: {
        current: 1,
        size: 3,
        total: 0,
        query: {
          name: ''
        }
      }
    }
  },
  computed: {
    mainMaterials() {
      this.page.total = this.$store.state.maincost.mainMaterials.total
      return this.$store.state.maincost.mainMaterials.records
    }
  },
  mounted() {
    //加载下拉列表数据
    listBrand().then(data => {
      this.brandOptions = data.map(n => {
        return {
          label: n.name,
          value: n.id
        }
      })

      data.forEach(n => {
        this.brandMap.set(n.id, n.name)
      })
    })

    listCategory().then(data => {
      this.categoryOptions = data.map(n => {
        return {
          label: n.name,
          value: n.id
        }
      })
      data.forEach(n => {
        this.categoryMap.set(n.id, n.name)
      })
    })
    listUnit().then(data => {
      this.unitOptions = data.map(n => {
        return {
          label: n.name,
          value: n.id
        }
      })
      data.forEach(n => {
        this.unitMap.set(n.id, n.name)
      })
    })

    this.qualityOptions = [
      { label: '抛釉', value: 1 },
      { label: '柔光', value: 2 },
      { label: '全瓷', value: 3 }
    ]
    this.qualityOptions.forEach(n=>{
      this.qualityMap.set(n.value,n.label)
    })
    this.reloadMainCost()
  },
  components: {
    Page
  },
  methods: {
    reset() {
      this.page.current = 1
      this.$refs.queryForm.resetFields()
      this.reloadCategory()

    },
    handleEdit(id) {
      this.title = '编辑分类'
      this.isShow = true
      getMainCost(id).then(res => {
        this.form = { ...res }
        this.form.createTime = ''
        this.form.lastUpdateTime = ''
      })
    },
    handleDelete(id) {
      this.$confirm('此操作将永久删除该主材, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        deleteMainCost(id).then(() => {
          this.reloadMainCost()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    reloadMainCost(reset = true) {
      if (reset) {
        this.page.current = 1
      }
      return new Promise((resolve, reject) => {
        this.$store.dispatch('maincost/pageMainCost', this.page).then(() => {
          resolve()
        }).catch((err) => {
          reject(err)

        })
      })

    },
    handleAdd() {
      this.title = '添加主材'
      this.isShow = true
      this.form.id = ''
      this.$refs.mainCostForm.resetFields()
    },
    search() {
      this.reloadMainCost().then(() => {
        this.$refs.queryForm.resetFields()
      })
    },
    saveOrUpdate() {
      if (this.form.id) {
        editMainCost(this.form).then(res => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.resetData()
        })

      } else {
        saveMainCost(this.form).then(res => {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.resetData()
        })
      }

    },
    resetData() {
      this.$refs.mainCostForm.resetFields()
      this.isShow = false
      this.title = ''
      this.reloadMainCost()
    },
    cancel() {
      this.isShow = false
      this.title = ''
      this.$refs.mainCostForm.resetFields()

    },
    handlePage(flag) {
      this.reloadMainCost(flag)
    }
  }
}
</script>

<style scoped>
.form-container {
  display: flex;
  justify-content: space-between;
}

.reset_btn {
  background-color: #722ed1;
  border: 1px solid #722ed1;
}

.reset_btn:hover {
  background-color: #7849b7;
  border: 1px solid #7849b7;
}

.reset_btn:focus {
  background-color: #7849b7;
  border: 1px solid #7849b7;
}
</style>
